<template>
  <div class="disscuss_body">
    <div class="demo-image__preview" style="margin-top: 20px">
      <el-button
        type="primary"
        icon="el-icon-circle-plus"
        @click="createTopic()"
        >发布话题</el-button
      >
      <el-button type="primary" icon="el-icon-circle-plus" @click="ciyun()"
        >焦点词云</el-button
      >

    </div>

    <el-drawer
  title="我是标题"
  :visible.sync="drawer"
  direction="ttb"
  style="width:25%;text-align:center;margin-left:60%;margin-top:10px"
   size="30%"
  :with-header="false">
  <img src="../../assets/images/ciyun1.jpg" alt="">
</el-drawer>

    <el-drawer
      title="发布话题"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="btt"
      size="70%"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input v-model="form.text" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
          
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </div>
    </el-drawer>

    <el-collapse
     
      accordion
      style="margin-top: 20px"
      v-for="o in topic"
      :key="o"
    >
      <el-card shadow="hover" Extra large style="margin-top: 20px">
        <el-collapse-item :title="o.title">
          <div>
            <h1 style="font-size:35px">
              {{ o.text }} <time class="time">{{ o.createTime }}</time>
            </h1>
            <!-- <router-link :to="{ path: '/analyse', query: { analyseId: o.id } }"> -->
            <el-button type="mini" icon="el-icon-check">{{ o.star }}</el-button>
           <router-link :to="{ path: '/comment', query: { TopicId: o.id } }" style="margin-left:10px">
                <el-button type="mini" icon="el-icon-chat-round">
                  
                  {{
              o.comment
            }}
  
            </el-button>
                  </router-link
        >
           
      
          </div>
        </el-collapse-item>
      </el-card>
    </el-collapse>
  </div>
</template>

<script>
import { findAll } from "@/api/getTopicData.js";
export default {
  data() {
    return {
      drawer: false,
      dialog: false,
      loading: false,
      form: {
        title:"",
        text:""

      },
      formLabelWidth: "80px",
      timer: null,
      topic: [
       
      ],
     
    };
  },
  methods: {
    async getAllTopic() {
      console.log("get ALL Topic")
      const result = await findAll().then()
      {
        this.topic = result.data.data
      }
    },
    createTopic() {
      this.dialog = true
      console.log("发布话题");
      console.log(this.form.title)
      console.log(this.form.text)
    },
    ciyun() {
      this.drawer =true
      console.log("热点词云");
    },

    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
  },
  created(){
    this.getAllTopic()
  }
};
</script>

<style>
  .el-collapse-item__header{
    font-size: 50px;
    font-family:fantasy;
  }
  .el-button el-button--mini{
    background-color: aqua;
  }

</style>